<div class='title'>路由页面公共样式</div>
<div class="sub">
    <div class='text indent'>
        css.conf中的common属性用于定义部分路由页面的公有样式。它的值是一个数组，数组中的元素是一个路由页面组，他们共享一套样式。路由页面组使用router属性定义，值是一个数组，样式使用css属性定义，这一套样式可以使定义在配置文件中的字符串，也可以是 /src/css/ 目录中的css文件，
        可以是一个或者多个css文件，多个文件使用逗号隔开，请看几个例子。
    </div>
    <div class='title'>1.使用css字符串</div>
    <div class='text'>
        使用router属性定义路由页面组，为了简单起见，这里只添加当前页面，也就是 /css/common 路由页面，读者可以自行添加多个。
    </div>    
    <div class='text'>
        css.conf 文件：
        <div class='j-code not-test' disabled width='99%' height='auto'>
{
    variable:{
    },
    common:[
        {
            router:["/css/common"],
            css:".test-common1{background-color:#aaa}"
        },{
            router:["/css/common"],
            css:".test-common2{color:#f44}"
        }
    ]
} 
        </div>
        使用：
        <div class='j-code not-test' disabled width='99%' height='auto'>
&lt;div class='test-common1'>样例1&lt;/div>
&lt;div class='test-common2'>样例2&lt;/div> 
        </div>
    </div>
    <div class='text'>
        以下是输出的结果：
        <div class='out'>
            <div class='test-common1'>样例1</div>
            <div class='test-common2'>样例2</div>
        </div>
    </div>
    <div class='title'>2.使用css文件名</div>
    <div class='text indent'>
        css属性中可以使css文件名，css文件存放在 /src/css/ 目录下。
    </div>    
    <div class='text'>
        
        test1.css 文件：
        <div class='j-code not-test' disabled width='99%' height='auto'>
.test-common3{background-color:#00a}
        </div>
        test2.css 文件：
        <div class='j-code not-test' disabled width='99%' height='auto'>
.test-common4{color:#88f}
        </div>
        test3.css 文件：
        <div class='j-code not-test' disabled width='99%' height='auto'>
.test-common5{color:#f5f}
        </div>
        css.conf 文件：
        <div class='j-code not-test' disabled width='99%' height='auto'>
{
    variable:{
    },
    common:[
        {
            router:["/css/common"],
            css:"test1.css"
        },{
            router:["/css/common"],
            css:"test2.css,test3.css"
        }
    ]
} 
        </div>
        使用：
        <div class='j-code not-test' disabled width='99%' height='auto'>
&lt;div class='test-common3'>样例3&lt;/div>
&lt;div class='test-common4'>样例4&lt;/div> 
&lt;div class='test-common5'>样例5&lt;/div> 
        </div>
    </div>
    <div class='text'>
        以下是输出的结果：
        <div class='out'>
            <div class='test-common3'>样例3</div>
            <div class='test-common4'>样例4</div>
            <div class='test-common5'>样例5</div>
        </div>
    </div>
</div>
<script>
</script>